<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-form layout="inline">
          <a-form-item>
            <a-input placeholder="手机号"></a-input>
          </a-form-item>
          <a-form-item>
            <a-input placeholder="密码"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handlePwd">修改密码</a-button>
          </a-form-item>
        </a-form>
        <a-divider style="margin:12px 0"></a-divider>
        <a-form layout="inline">
          <a-form-item>
            <a-input placeholder="手机号" v-model="queryParam.mobile"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
        <template
          slot="is_vip"
          slot-scope="text">
          <a-tag :color="text == 1 ?'blue' :'red'">{{ text | statusFilter }}</a-tag>
        </template>
        <template
          slot="is_card"
          slot-scope="text">
          <a-tag :color="text == 1 ?'blue' :'red'">{{ text | statusFilter }}</a-tag>
        </template>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-form layout="inline">
              <a-form-item >
                <a-input placeholder="输入密码" v-model="record.newPwd"></a-input>
              </a-form-item>
              <a-form-item>
                <a @click="handlePwd(record)">修改密码</a>
              </a-form-item>
            </a-form>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { userList } from '@/api/stat'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '昵称',
    dataIndex: 'name'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '是否是会员',
    dataIndex: 'is_vip',
    scopedSlots: { customRender: 'is_vip' }

  },
  {
    title: '是否是年卡',
    dataIndex: 'is_card',
    scopedSlots: { customRender: 'is_card' }

  }
  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   width: '300px',
  //   scopedSlots: { customRender: 'action' }
  // }
]

const STATUS_MAP = {
  0: '否',
  1: '是'
}

export default {
  name: 'UserList',
  mixins: [formTableMixin],
  data () {
    this.columns = columns
    this.listAction = userList
    return {

    }
  },
  filters: {
    statusFilter (status) {
      return STATUS_MAP[status]
    }
  },
  methods: {
    handlePwd (record) {
      this.$message.warning('此功能未完善,请联系管理员')
    }
  }
}
</script>
